<template>
  <el-dialog :visible.sync="dialogVisible"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="90%"
    top="10vh"
    custom-class="update-ai-category-dialog"
    @close="handleClose">
    <div class="flex justify-between items-baseline flex-wrap pr-8 sm:pr-10 gap-x-4 gap-y-2"
      slot="title">
      <span class="flex-shrink-0">{{$t('update_dialog_toolCategories')}}</span>
      <span class="flex-shrink-0 font-normal text-sm text-purple-1300">{{$t('update_theScoreCan')}}</span>
    </div>
    <div class="update-ai-category-content divide-y divide-gray-2000">
      <div class="categories-box"
        :style="{maxHeight:maxHeight+'px'}">
        <el-checkbox-group v-model="categories"
          class="divide-y divide-gray-2000">
          <div class="categories-group block pt-4 pb-4"
            v-for="(item, key) in categoriesList"
            :key="`group-${key}`">
            <h4>{{item.title}}</h4>
            <div class="checkbox-list">
              <div class="inline-flex items-center gap-2 flex-shrink-0"
                v-for="(titem, tkey) in item.values"
                :key="`checkbox-${tkey}`">
                <el-checkbox :label="titem.id">
                  {{titem.name}}
                </el-checkbox>
                <el-input-number v-model="categoriesList[key].values[tkey].score"
                  :min="0.1"
                  :max="1"
                  :step="0.1"
                  :precision="1"
                  :step-strictly="true"
                  :controls="false"
                  size="mini"
                  class="w-12 flex-shrink-0"></el-input-number>
              </div>
            </div>
          </div>
        </el-checkbox-group>
      </div>
      <div class="flex justify-end p-4">
        <el-button type="primary"
          @click="toSelect()">{{$t('update_dialog_select')}}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'UpdateCategorySelect',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    categoriesList: {
      type: Array,
      default: () => [],
    },
    maxHeight: {
      type: Number | String,
      default: 400,
    },
    categoriesScore: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      categories: [],
    }
  },
  watch: {
    categoriesScore: {
      handler() {
        this.init()
      },
      immediate: true,
      deep: true,
    },
    visible: {
      handler(val) {
        this.dialogVisible = val
        this.init()
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {},
  methods: {
    init() {
      let categories = []

      this.categoriesScore.forEach((item) => {
        categories.push(item.id)
        this.categoriesList.forEach((citem) => {
          citem.values.forEach((vitem) => {
            if (vitem.id === item.id) {
              vitem.score = item.score
            }
          })
        })
      })

      this.categories = JSON.parse(JSON.stringify(categories))
    },
    toSelect() {
      let cValue = []
      this.categoriesList.forEach((item) => {
        item.values.forEach((vitem) => {
          if (this.categories.includes(vitem.id)) {
            cValue.push({
              id: vitem.id,
              score: vitem.score,
            })
          }
        })
      })

      this.$emit('handleSelect', cValue)
    },
    handleClose() {
      this.$emit('handleClose')
    },
  },
}
</script>
<style lang="scss">
.update-ai-category-dialog {
  border-radius: 12px;
  max-width: 1000px;
  .el-dialog__header {
    //display: none;
    span {
      font-size: 18px;
      font-weight: bold;
      color: #2f3032;
      line-height: 28px;
    }
  }
  .el-dialog__body {
    padding: 0;
    .update-ai-category-content {
      .dialog-title {
        font-size: 18px;
        font-weight: bold;
        color: #2f3032;
        line-height: 28px;
      }
      .categories-box {
        overflow-y: auto;
        padding: 0 20px 20px;
        .categories-group {
          h4 {
            font-weight: bold;
            font-size: 16px;
            color: #000000;
            line-height: 20px;
            margin-bottom: 12px;
          }
          .checkbox-list {
            display: flex;
            align-items: center;
            gap: 12px 30px;
            line-height: 28px;
            flex-wrap: wrap;
            .el-checkbox__inner {
              width: 20px;
              height: 20px;
              &::after {
                height: 9px;
                left: 6px;
                top: 2px;
                width: 4px;
                border: 2px solid #ffffff;
                border-left: 0;
                border-top: 0;
                transition: transform 0.15s ease-in 0.01s;
              }
            }
            .el-input {
              .el-input__inner {
                padding-left: 0;
                padding-right: 0;
                height: 24px;
                line-height: 24px;
              }
            }
          }
        }
      }
    }
  }
}
</style>